<script setup>
import { onMounted } from 'vue'

const props = defineProps({
  url: {
    type: String,
    default: ''
  },
  name: {
    type: String,
    default: ''
  },
  imgWidth: {
    type: String,
    default: '20px'
  },
  imgHeight: {
    type: String,
    default: '20px'
  }
})

const stringToColor = (str) => {
  let color = '#'
  for (let i = 0; i < str.length; i++) {
    color += parseInt(str[i].charCodeAt(0), 10).toString(16)
  }
  return color.slice(0, 4)
}

onMounted(() => {
  console.log(props.url)
})
</script>

<template>
  <div class="avatar-name-container">
    <div v-if="url.startsWith('http')">
      <img class="img-avatar" :src="url" alt="" />
    </div>
    <div v-else class="font-avatar-wrap" :style="`background-color: ${stringToColor(name)};`">
      <span class="font-avatar">{{ name.charAt(0) }}</span>
    </div>
    <div class="name">{{ name }}</div>
  </div>
</template>

<style scoped lang="less">
.avatar-name-container {
  display: flex;
  align-items: center;
}

.img-avatar {
  width: v-bind(imgHeight);
  height: v-bind(imgHeight);
  border-radius: 50%
}

.font-avatar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: v-bind(imgHeight);
  height: v-bind(imgHeight);
  border-radius: 50%;
  font-size: 12px;
}

.font-avatar {
  color: #fff;
  line-height: 12px;
}

.name {
  margin-left: 8px;
  font-size: 14px;
  line-height: 14px;
}
</style>